<script setup lang="ts">
import { reactive, ref, toRaw, watch, watchEffect } from "vue";
import { useRouter } from "vue-router";
// import { getRoutesAsync } from "@/api/system";

defineOptions({
  name: "Welcome"
});

const router = useRouter();

// getRoutesAsync();
const state = reactive({
  number: 1
});

// watch(
//   () => state,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue, newValue === oldValue);
//   },
//   {
//     deep: true
//   }
// );

const b = ref(0);
watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${state.number}`
  );
  b.value = await response.json();
  console.log(b.value);
});

const test = () => {
  // state.number = 2;
  b.value = 3;
  // console.log(state.number);
};

const a = ref(false);
console.log(toRaw(1));
</script>

<template>
  <h1 @click="test">Pure-Admin-Thin（非国际化版本）</h1>
</template>
